<template>
  <a-row type="flex" justify="center">
    <a-drawer
      title="过滤条件"
      :width="300"
      v-show="show_sider && GetIspc"
      :visible="is_drawer_visible"
      :body-style="{ paddingBottom: '80px' }"
      placement="left"
      @close="onDrawerClose"
    >
      <div class="logo" />
      <!-- slider  start -->
      <sider-search :state="search_result"> </sider-search>
      <!-- slider end -->
    </a-drawer>
    <a-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="22"
      :xl="19"
      :style="
        GetIspc
          ? 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 0px'
          : 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 40px'
      "
    >
      <a-layout id="components-layout-demo-top" class="layout">
        <a-back-top />

        <!-- pc slider start-->
        <a-layout-sider
          v-show="show_sider && !GetIspc"
          theme="light"
          width="25%"
          breakpoint="lg"
          collapsed-width="0"
          @collapse="onSearchSideCollapse"
          @breakpoint="onSearchSideBreakpoint"
        >
          <div class="logo" />

          <sider-search :state="search_result"> </sider-search>
        </a-layout-sider>
        <!-- pc slider end -->
        <a-layout-content style="width: 72%; background: #fff; padding: 20px">
          <a-row>
            <a-affix v-show="!is_show_sider_bar" style="text-align:right">
              <a-button @click="affixChange">
                <a-icon type="menu-unfold"></a-icon>
              </a-button>
            </a-affix>
          </a-row>
          <a-card>
            <a-row >
              <a-divider dashed />
            </a-row>
            <a-row>
              <!-- search  start -->
              <search-box ref="child" />
              <!-- search end -->
            </a-row>
            <a-row v-show="!GetIspc">
              <a-divider dashed />
            </a-row>
            <a-row v-show="show_pagination && total_counts > 0">
              <a-divider dashed />
            </a-row>
            <!-- 分页 start -->
            <a-row v-if="show_pagination && total_counts > 0">
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
            </a-row>
            <!-- 分页 end -->
            <a-row :gutter="2" v-show="show_pagination && total_counts > 0">
              <a-divider dashed />
            </a-row>
          </a-card>
          <!-- 检索列表 start -->
          <a-row v-show="show_sider">
            <a-list :grid="{ gutter: 16 }" :loading="loading_over">
              <a-list-item v-for="(book, index) in books" :key="index">
                <book-list v-on:showbookid="ShowBookId" :book="book">
                </book-list>
              </a-list-item>
            </a-list>
          </a-row>
          <!-- 检索列表 end -->
          <a-row v-show="show_pagination && total_counts > 0 && !showdetail">
            <a-card>
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
            </a-card>
          </a-row>
        </a-layout-content>
      </a-layout>
    </a-col>
  </a-row>
</template>

<script>
import BookList from "./common/BookList.vue";
import SiderSearch from "./common/SiderSearch";

// import BookInfo from "./BookInfo.vue";
import SearchBox from "./common/SearchBox.vue";
import SearchPagination from "./common/SearchPagination.vue";

export default {
  name: "BookSearch",
  components: {
    "book-list": BookList,
    // "book-info": BookInfo,
    "sider-search": SiderSearch,
    "search-box": SearchBox,
    "search-pagination": SearchPagination,
  },
  data() {
    return {
      book_already_showing: false,
      is_show_sider_bar: false,
      is_drawer_visible: false,
      drawer_palcement: "left",
      is_bookinfo_visible: false,
      bookinfo_title: "",
      is_bookinfo_spinning: false,
      is_spinning: false,
      intro: "",
      info: [],

      // 搜索
      value: [0, 100],
      yeararr: [1900, new Date().getFullYear()],
      // [{ fieldCode: "", fieldValue: "" }]
      min: 1900,
      max: new Date().getFullYear(),
      search_fields_adv: [],
      year_start: 1900,
      year_end: new Date().getFullYear(),
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),

      visible: false,
      entercon: "统一检索",
    };
  },
  computed: {
    // 判断设备
    GetIspc() {
      return navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
    },

    loading_over() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .loading_over;
    },
    rscontype() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .rscontype;
    },
    showdetail() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .showdetail;
    },
    getclassname() {
      return this.$store.state.Namedparent.name;
    },
    // getfilters() {
    //   console.log("--------------------------------");
    //   console.log(this.$store.state[this.$store.state.Namedparent.name].books);
    //   return this.$store.state[this.$store.state.Namedparent.name].books.qs.filters;
    // },
    books() {
      // console.log(
      //   "computed MainContent books ",
      //   this.$store.state[this.$store.state.Namedparent.name].books.rs.content
      // );
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .content;
    },
    show_sider() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_sider;
    },
    show_pagination() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_pagination;
    },
    sort_fields() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.sortFields;
    },

    page_current() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs.p;
    },
    page_size() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .pageSize;
    },
    page_size_options() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.pageSizeOptions;
    },
    page_size_default() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.defaultPageSize;
    },

    page_sort_order() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortType;
    },
    page_order_by() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortField;
    },
    total_counts() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .total;
    },
    facets_lists() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .facetsList;
    },

    params_search() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs;
    },
    search_result: {
      get() {
        var sr = {
          total_counts: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.total_counts,
          page_size: this.$store.state[this.$store.state.Namedparent.name].books
            .rs.pageSize,
          page_current: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.pageCount,
          facets_lists: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.facetsList,
          books: this.$store.state[this.$store.state.Namedparent.name].books.rs
            .content,
          deep: true,
        };
        return sr;
      },
    },
  },

  watch: {
  },
  methods: {
    //点击ok
    handleOk() {
      this.is_bookinfo_visible = false;
    },
    //点击cancel
    handleCancel() {
      this.is_bookinfo_visible = false;
    },
    showDrawer() {
      this.is_drawer_visible = true;
    },
    onDrawerClose() {
      this.is_drawer_visible = false;
    },
    onBookinfoClose() {
      this.is_bookinfo_visible = false;
    },
    onBookinfoShow() {
      this.is_bookinfo_visible = true;
    },
    onSearchSideCollapse(collapsed, type) {
      console.log(
        "onSearchSideCollapse",
        collapsed,
        type,
        this.is_show_sider_bar
      );
    },

    onSearchSideBreakpoint(broken) {
      this.is_show_sider_bar = !broken;
      if (this.is_show_sider_bar) {
        if (!broken) {
          this.is_drawer_visible = false;
        }
      }
    },
    affixChange() {
      this.is_drawer_visible = !this.is_drawer_visible;
    },
    ShowBookId(is_showing, marc_no, title) {
      this.bookinfo_title = title;
      this.book_already_showing = is_showing;
      this.is_bookinfo_visible = true;
      this.$refs.bookinfo_child.GetBookInfo(marc_no);
    },

    /**
     * 纸书检索
     */
    GetBooksLibsys: function () {
      this.is_init = false;
      this.$store.dispatch("GetBooks");
    },
    handleClose(e, indexs) {
      var fieldclassName = e.fieldName;
      var id = e.fieldName;
      var code = e.values[indexs];
      var do_search_book = false;
      this.$store.commit(
        this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
        {
          fieldName:
            this.$store.state.Namedparent.name == "Paperbook"
              ? fieldclassName
              : id,
          value: code,
        },
        do_search_book
      );
      // this.$store.state[this.$store.state.Namedparent.name].books.qs.filters.forEach(item => {
      //     console.log(item)
      //     that.selectvalue.push(item.values[0])
      //   });
    },
  },
  mounted() {
    if (this.$route.query.searchtitle) {
      // this.SearchAction(this.$route.query.searchtitle);
      this.$refs.child.SearchAction(this.$route.query.searchtitle);
    }
    // search end

    // var cmp = this.$route.name;
    // console.log(cmp);
    // if (cmp == "BookSearch") {
    //   console.log("Search init keyword 0 : ");
    //   //   JSON.parse(this.$route.params.id);
    //   var keyword = this.$route.params.id;
    //   if (keyword) {
    //     console.log("Search init keyword 1 : ", keyword);

    //     this.$store.commit("CLEAR_QS");
    //     if (keyword) {
    //       console.log("Search init keyword 2 search keyword: ", keyword);
    //       this.$store.commit("UpdateQsSearchKeyWord", keyword);
    //       this.$store.dispatch("GetBooks");
    //     } else {
    //       console.log("Search init keyword 2 skip: ", keyword);
    //     }
    //     return;
    //     // this.$store.commit("PARAMS_INIT_QS", qs);
    //     // this.$store.dispatch("GetBooks");
    //     // this.search_result = this.$store.state[this.$store.state.Namedparent.name].books.rs.content;
    //     // this.GetEBooks();
    //     // this.GetBooksLibsys();
    //   }
    // }
    // if (cmp == "BookInfo") {
    //   var marc_no = this.$route.params.id;

    //   console.log(
    //     " %c  now in mount BookInfo htis marc_no: ",
    //     "color:brown;",
    //     marc_no,
    //     this.$route
    //   );
    //   if (marc_no) {
    //     // if (!this.is_bookinfo_visible) {
    //     this.is_bookinfo_visible = true;
    //     this.$refs.bookinfo_child.GetBookInfo(marc_no);
    //     // this.GetBookInfo(marc_no);
    //     return;
    //     // this.$emit("ShowBookid", marc_no);
    //     // }
    //   }
    // }
    // this.marc_no = "";
  },
};
</script>

<style scoped>
/deep/.amodal .ant-modal {
  width: 50% !important;
}
/* /deep/.ant-row {
  background: #fff;
} */
/* /deep/.ant-list-grid .ant-col > .ant-list-item {
  margin-bottom: -6px;
} */
/deep/.sliderhead .ant-collapse-header {
  color: #fff !important;
}
/deep/.ant-collapse-item:last-child > .ant-collapse-content {
  border-radius: 0;
}
</style>